<template>
  <div style="padding: 10px;">
    <div class="headerBoxList">
      <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M18 25.9993V10C18 6.68629 20.6863 4 24 4C27.3137 4 30 6.68629 30 10V25.9993C32.4289 27.8237 34 30.7284 34 34C34 39.5228 29.5228 44 24 44C18.4772 44 14 39.5228 14 34C14 30.7284 15.5711 27.8237 18 25.9993Z"
          fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round" />
        <path d="M24 17V30" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
        <path
          d="M24 38C26.2091 38 28 36.2091 28 34C28 31.7909 26.2091 30 24 30C21.7909 30 20 31.7909 20 34C20 36.2091 21.7909 38 24 38Z"
          fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round" />
      </svg>
      <span style="margin-left: 10px">温度属性 <span style="font-size: 15px;" v-if="total !== 0">({{ total }}条)</span></span>
    </div>
    <div class="content">
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="date" label="温度属性">
          <template slot-scope="scope">
            <div class="tableDiv">电池关闭温度： {{ scope.row.Battery_shutdown_temperatures }}</div>
            <div class="tableDiv">电池温度： {{ scope.row.Battery_temperatures }}</div>
            <div class="tableDiv">电池节流温度： {{ scope.row.Battery_throttling_temperatures }}</div>
            <div class="tableDiv">电池 vr节流温度： {{ scope.row.Battery_vr_throttling_temperatures }}</div>
            <div class="tableDiv">CPU关闭温度： {{ scope.row.CPU_shutdown_temperatures }}</div>
            <div class="tableDiv">CPU温度： {{ scope.row.CPU_temperatures }}</div>
            <div class="tableDiv">CPU节流温度： {{ scope.row.CPU_throttling_temperatures }}</div>
            <div class="tableDiv">CPU vr节流温度： {{ scope.row.CPU_vr_throttling_temperatures }}</div>
            <div class="tableDiv">CPU核心0的使用： {{ scope.row.Cpu_usage_of_core_0 }}</div>
            <div class="tableDiv">CPU核心1的使用： {{ scope.row.Cpu_usage_of_core_1 }}</div>
            <div class="tableDiv">CPU核心2的使用： {{ scope.row.Cpu_usage_of_core_2 }}</div>
            <div class="tableDiv">CPU核心3的使用： {{ scope.row.Cpu_usage_of_core_3 }}</div>
            <div class="tableDiv">风扇转速： {{ scope.row.Fan_speed }}</div>
            <div class="tableDiv">GPU关闭温度： {{ scope.row.GPU_shutdown_temperatures }}</div>
            <div class="tableDiv">CPU关闭温度： {{ scope.row.GPU_temperatures }}</div>
            <div class="tableDiv">GPU节流温度： {{ scope.row.GPU_throttling_temperatures }}</div>
            <div class="tableDiv">GPU vr节流温度： {{ scope.row.GPU_vr_throttling_temperatures }}</div>
            <div class="tableDiv">Skin关闭温度： {{ scope.row.Skin_shutdown_temperatures }}</div>
            <div class="tableDiv">Skin温度： {{ scope.row.Skin_temperatures }}</div>
            <div class="tableDiv">Skin节流温度： {{ scope.row.Skin_throttling_temperatures }}</div>
            <div class="tableDiv">Skin vr节流温度： {{ scope.row.Skin_vr_throttling_temperatures }}</div>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="offset"
        :page-size="limit" :pager-count="4" layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
  
<script>
import { getPhoneInFoApi } from '@/api/phoneInfo/index'
export default {
  name: 'temperature',
  props: ['sendData'],
  data() {
    return {
      list: [],
      total: 0,
      offset: 1,
      limit: 10
    }
  },
  watch: {
    '$store.state.account.basePhone': function () {
      this.init();
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.offset = val;
      this.init()
    },
    init() {
      let api = '/' + this.sendData.href;
      let data = {
        proof_num: this.sendData.proof_num,
        offset: this.offset,
        limit: this.limit
      }
      getPhoneInFoApi(data, api).then(res => {
        this.list = res.data;
        this.total = res.data[0].cnt;
      }).catch(error => {

      })

      return
      let arr = str.split("\n");
      this.list = arr;
      this.total = arr.length;
    }

  }

}
</script>
  
<style scoped>
.tableDiv {
  margin-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
}

.headerBoxList {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #d2d2d2;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.content {
  height: 81vh;
  overflow-y: auto;
  padding-left: 0px;
  margin-top: 20px;
  overflow-x: hidden;
}

@media screen and (min-width: 2360px) {
  .content {
    height: 77vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

@media screen and (min-width: 2561px) {
  .content {
    height: 62vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>